<template>
    <div class="oneDiv">
      <div class="sumDiv">
        <!-- 新增按钮和搜索框start -->
        <div class="headFromDiv">
          <div class="leftDiv">
            <el-button type="primary" @click="addSeal()">新增公告</el-button>
          </div>
          <div class="rightDiv">
            <el-row class="elrow">
              <el-col>
                <el-form :inline="true" :model="searchData" class="demo-form-inline">
                  <el-form-item>
                    <el-input v-model="searchData.title" placeholder="请输入标题"></el-input>
             
                  </el-form-item>
            
                  <el-form-item>
                    <el-select v-model="searchData.department" placeholder="全部">
                      <el-option label="产品部" value=1></el-option>
                      <el-option label="开发部" value=2></el-option>
                      <el-option label="运营部" value=3></el-option>
                      <el-option label="总经办" value=4></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <el-button @click="seachTableData()">搜索</el-button>
                    <el-button @click="resetQuery()">重置</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 新增按钮和搜索框end-->
  <!-- 左侧条查 -->
  <div class="leftDiv2">
         <el-menu class="menu">
             <el-menu-item class="item" @click="searchAll">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;全部 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<el-tag type="success">{{ total1 }}</el-tag></el-menu-item>
             <el-menu-item class="item" @click="searchData1">新闻资讯</el-menu-item>
             <el-menu-item class="item" @click="searchData2">通知公告</el-menu-item>
             <el-menu-item class="item" @click="searchData3">规章制度</el-menu-item>
             <el-menu-item class="item" @click="searchData4">行业动态</el-menu-item>
         </el-menu>
        </div>

        <!-- 表格信息展示start -->
        <div class="bottomDiv">
          <el-table :data="tableData" border style="width:95%;margin-left: 25px;"
            :header-cell-style="{ background: '#f4f4f4', color: 'black' }">
            <el-table-column prop="title" label="公告标题" width="190">
              <template slot-scope="scope">
                      <router-link :to="{name :'xiangqing1',query:{ a:scope.row}}"  style="text-decoration: none; color: #1890FF;">{{ scope.row.title }}</router-link>
                </template>
            </el-table-column>
            <el-table-column prop="tposition.deptName" label="发布部门" width="100">
            </el-table-column>>
            <el-table-column prop="creationTime" label="创建时间" width="189">
            </el-table-column>
            <el-table-column prop="updateTime" label="更新时间" width="189">
            </el-table-column>
            <el-table-column label="操作" width="190" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
              :page-sizes="[2, 10, 15, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </div>
      </div>
      <!-- 表格信息展示end -->
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        // 条查以及分页的表单
        pageNum: 1,
        pageSize: 10,
        total: 0,
        searchData: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
      
        },
        tableData: [],
        total1:"",
        
  
  
  
      }
    },
    created() {
      // 初始化条查
      this.seachTableData();
    },
  
    methods: {
  
      // 查询
      seachTableData() {
        this.searchData.currentPage = this.pageNum;
        this.searchData.pageSize = this.pageSize;
        axios.post("notice/queryNotice", this.searchData)
          .then((res) => {
            console.log(res);
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
            this.total1 = res.data.data.total;
           
          });
      },
      // 新增按钮事件
      addSeal() {
        this.$router.push({ path: '/addnotice' });
      },
      //重置按钮
      resetQuery() {
        this.searchData = {}
        this.seachTableData();
      },
      // 编辑 弹框回显 修改标题走修改方法
      handleEdit(index, row) {
        console.log(row)
        this.$router.push({
          name: 'addnotice',
          params: row
        });
      },
      // 删除
      handleDelete(index, row) {
        axios.post("/notice/deleteNotice?id=" + row.id)
          .then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功")
              this.seachTableData();
            } else {
              this.$message.error("删除失败")
              this.seachTableData();
            }
          })
      },
  
      // 点击弹框的取消数据清空，事件关闭
      call() {
        this.AddHolidayFrom = {}
        this.centerDialogVisible = false
      },
      //分页
      handleSizeChange(val) {
        this.pageSize = val;
        this.seachTableData();
      },
      handleCurrentChange(val) {
        console.log(val)
        this.pageNum = val;
        this.seachTableData();
      },
      // 时间按钮递增
      handleChange(value) {
        console.log(value);
      },
  
  //左侧条查
  searchData1(){
        this.searchData.fromColumn=1,
        this.seachTableData();
      },
      searchData2(){
        this.searchData.fromColumn=2,
        this.seachTableData();
      },
      searchData3(){
        this.searchData.fromColumn=3,
        this.seachTableData();
      },
      searchData4(){
        this.searchData.fromColumn=4,
        this.seachTableData();
      },
      searchAll(){
        this.searchData.fromColumn="",
        this.seachTableData();
      }
    

    }
    
  }
  </script>
  
  <style scoped>
  .oneDiv {
    width: 100%;
    height: 100%;
    margin-top: -14px;
    background-color: rgba(244, 244, 244, 1);
    padding-top: 20px;
  }
  
  /* 装信息和条查的盒子 */
  .sumDiv {
    width: 100%;
    height: 1000px;
    margin: auto;
  }
  
  /* 搜索框和按钮的盒子 */
  .headFromDiv {
    width: 90%;
    height: 80px;
    /* margin: auto; */
    background-color: #fff;
    border-radius: 9px;
  }
  
  /* 左侧的 */
  .leftDiv {
    float: left;
    padding-top: 20px;
    padding-left: 25px;
  }
  
  .rightDiv {
    float: right;
    margin-top: 20px;
    margin-right: 15px;
  }
  
  .bottomDiv {
    width: 70%;
    height: 100%;
    /* margin: auto; */
    float: left;
    margin-top: 20px;
    padding-top: 20px;
    background-color: #fff;
    border-radius: 9px;
    margin-left:30px ;
   
  }
  
  /* 分页的盒子 */
  .block {
    text-align: right;
    margin-top: 10px;
    margin-right: 20px;
  }
  
  .el-row {
    margin-bottom: 20px;
  }
  
  .el-col {
    border-radius: 4px;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  
  
  .block {
    margin-top: 20px;
    text-align: right;
    padding-right: 20px;
  }
  .leftDiv2{
    width: 18%;
    height: 100%;
    background-color: #fff;
    float: left;
    margin-top: 48px;
    border-radius: 10 px;
  }
  .item{
    text-align: center;
    margin-top: 20PX;
    border-radius: 20px;
  }
  </style>